<template>
    <el-descriptions 
      :column="columnCount" 
      border 
      class="uniform-descriptions"
      :class="{'is-bordered': border}"
      :size="size"
      :title="title"
      :direction="direction"
    >
      <slot />
    </el-descriptions>
  </template>
  
  <script setup>
  import { computed, defineComponent, defineProps, h, inject, nextTick, onMounted, ref } from 'vue'
  
  const props = defineProps({
    column: {
      type: Number,
      default: 3
    },
    border: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    direction: {
      type: String,
      default: 'horizontal'
    }
  })
  
  const columnCount = computed(() => props.column || 3)
  
  onMounted(() => {
    nextTick(() => {
      const descriptions = document.querySelector('.uniform-descriptions .el-descriptions__body')
      if (descriptions) {
        const items = descriptions.querySelectorAll('.el-descriptions__cell')
        const totalWidth = descriptions.offsetWidth
        const itemWidth = `${totalWidth / columnCount.value}px`
        
        items.forEach(item => {
          item.style.width = itemWidth
        })
      }
    })
  })
  </script>
  
  <style scoped>
.uniform-descriptions::v-deep .el-descriptions__table,
.uniform-descriptions::v-deep .el-descriptions__cell {
  border-color: #bbbbbb !important;
}
  .uniform-descriptions .el-descriptions__cell {
    flex: 0 0 auto !important;
    padding: 0 !important;
  }
  
  .uniform-descriptions .el-descriptions__label,
  .uniform-descriptions .el-descriptions__content {
    padding: 8px 12px !important;
  }
  </style>  